<template>
  <div ref="graphContainer" class="kbs-graph-container"></div>
</template>

<script>
  import { mxClient, mxUtils, mxEditor, mxConstants, mxPerimeter, mxPopupMenu } from '@/components/plugins/mxgraph/mxgraph'
  import grid from '@/components/plugins/mxgraph/images/grid.gif'

  export default {
    name: 'GraphContainer',
    props: {
      showBGFlag: {
        type: Boolean,
        custom: true,
        default: false
      }
    },
    data () {
      return {
        background: 'background:url(' + grid + ')' // 设备背景图
      }
    },
    mounted () {
      let self_ = this
      self_.setCommonStyle()//
      self_.init(self_)
      if (self_.showBGFlag) {
        self_.$refs['graphContainer'].style.background = 'url(' + grid + ')'
      }
      mxPopupMenu.prototype.submenuImage = './static/images/general/submenu.gif'
    },
    methods: {
      init (self_) {
        // 检查浏览器是否受支持
        if (!mxClient.isBrowserSupported()) {
          // 如果不支持浏览器，则显示错误消息。
          mxUtils.error('Browser is not supported!', 200, false)
        } else {
          let container = self_.$refs['graphContainer']
          // 禁用内置上下文菜单
          // mxEvent.disableContextMenu(container)

          // 创建一个画板
          let editor = new mxEditor()
          editor.setGraphContainer(container)

          // 设置 vertex 和 edge 的样式
          // self_.setComponentsStyle(self_, editor)

          self_.$nextTick(() => {
            self_.$emit('ready', editor)
          })
        }
      },
      /* private */
      setCommonStyle () {
        // Changes some default colors
        // 选中 cell 后的连接点颜色
        mxConstants.HANDLE_FILLCOLOR = '#99ccff'
        mxConstants.HANDLE_STROKECOLOR = '#0088cf'
        // edge 连接点颜色
        mxConstants.CONNECT_HANDLE_FILLCOLOR = '#409EFF'
        // 控制 vertex connect hover 边框颜色
        mxConstants.DEFAULT_VALID_COLOR = '#409EFF'
        // 选中 edge 后的颜色
        mxConstants.EDGE_SELECTION_COLOR = '#00a8ff'
        // 选中 vertex 后的边框颜色
        mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff'
      },
      setComponentsStyle (self_, editor) {
        const graph = editor.graph
        let vertexStyle = graph.getStylesheet().getDefaultVertexStyle()
        vertexStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE
        vertexStyle[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter
        vertexStyle[mxConstants.STYLE_ROUNDED] = false// 是否圆角
        vertexStyle[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
        vertexStyle[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE

        graph.alternateEdgeStyle = 'elbow=vertical'
      }
    }
  }
</script>
<style src="./css/common.css"></style>
<style lang="less">
  .kbs-graph-container {
    touch-action: none;
    overflow: hidden;
    cursor: pointer;
  }
</style>
